<!DOCTYPE html>
<html>
<head>
  <title>Login - Forufans Panel</title>
  <link rel="shortcut icon" href="template/images/logo-fuf.png" alt="forufans Brand">
  <meta name="description" content="Bantuin Nyari Info Asia Kesukaan Kamu">
  <meta name="keywords" content="Bantuin Nyari Info Asia Kesukaan Kamu">
  <link href="template/css/bootstrap.css" rel="stylesheet"> 
  <link href="template/css/font-awesome.css" rel="stylesheet">
  <link href="template/css/font-awesome.min.css" rel="stylesheet">
  <link href="template/css/fuf.css" rel="stylesheet">
  <script type="text/javascript" src="template/js/jquery-2.1.1.js"></script>
</head>
<body>
  <form name="customForm" action="" class="signup">
    <fieldset>
      <legend class="legend">Enter to Win</legend>
      <div class="input">
        <input type="email" name="email" placeholder="Email Address" required />
        <span><i class="fa fa-envelope-o"></i></span>
      </div>
      <div class="input">
        <input type="text" placeholder="First & Last Name" required />
        <span><i class="fa fa-user"></i></span>
      </div>
      <button type="submit" class="submit"><i class="fa fa-long-arrow-right"></i></button>
    </fieldset>
    <div class="feedback">
      login successful <br />
      redirecting...
    </div>
  </form>
</body>
<script type="text/javascript" src="template/js/bootstrap.js"></script>
<script type="text/javascript">
  {literal}
    $( ".input" ).focusin(function() {
      $( this ).find( "span" ).animate({"opacity":"0"}, 200);
    });

    $( ".input" ).focusout(function() {
      $( this ).find( "span" ).animate({"opacity":"1"}, 300);
    });

    $(".signup").submit(function(){
      $(this).find(".submit i").removeAttr('class').addClass("fa fa-check").css({"color":"#fff"});
      $(".submit").css({"background":"#2ecc71", "border-color":"#2ecc71"});
      $(".feedback").show().animate({"opacity":"1", "bottom":"-80px"}, 400);
      $("input").css({"border-color":"#2ecc71"});
      return false;
    });
  {/literal}
</script>
</html>